﻿<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>我的足迹</title>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAPTwhF4vlVXrO7ZGOjA9sOxTqQ5WtUwE0C8FR1hRk-yj3qFOmhhR6esbxCerNyfzApAoTJGfOHzcKCQ&sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;
	var geocodedCityNum = 0;
	var cityNum = 0;
    var cities = [];	
	
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
		map.addControl(new GLargeMapControl ());
        map.addControl(new GScaleControl());
        // 允许使用鼠标滚轮缩放
        map.enableScrollWheelZoom();
		// 设置地图为全国视野，以便看到北京，上海，广州
        map.setCenter(new GLatLng(34.597, 106.083), 5);
        document.getElementById("map_zoom").innerHTML = map.getZoom();

        GEvent.addListener(map, "zoomend", function() {
          document.getElementById("map_zoom").innerHTML = map.getZoom();
        });

        // 添加KML	
        var geoXml = new GGeoXml("http://chinamaps.googlecode.com/svn/mapsapi/gddcodelab/data/travel.kml");
        map.addOverlay(geoXml);

        GDownloadUrl("http://chinamaps.googlecode.com/svn/mapsapi/gddcodelab/data/cities-nocoordinate.json",
                     function(data, responseCode) {
           cities = eval(data);
		   if (cities.length > 0) {
		     addVisitedCities();
           }
        });
	  }
    } 

    function addVisitedCities() {
	  geocoder = new GClientGeocoder();

      cityNum = cities.length;
      var geocodedCityNum = 0;
   	  for (var i = 0; i < cityNum; i++) {
         geocodeCity(cities[i]);
      }
    }

	function geocodeCity(city) {
      geocoder.getLatLng(city.address, function(point) {
        if (!point) {
          alert("地址解析失败！");
          city.point = null;
        } else {
          city.point = point;
		  addMarker(city);
       }
       geocodedCityNum++;
       // 检查是否所有的城市都已经返回
	   if (geocodedCityNum == cityNum) {
         addFootPrint();
       }
      });
	}

    function addFootPrint() {
      var points = [];
	  for (var i = 0; i < cityNum; i++) {
	    if (cities[i].point) {
          points.push(cities[i].point);
		}
	  }
      map.addOverlay(new GPolyline(points));
    }
	
    function addMarker(city) {
      var tabs = [];
	  // 生成tab内容
	  for (var i = 0; i < city.tabs.length; i++) {
	    tabs.push(new GInfoWindowTab(city.tabs[i].title, city.tabs[i].details));
	  }

      // 创建自己的图标
      var icon = new GIcon();
      icon.image = "http://maps.google.com/mapfiles/kml/shapes/flag_maps.png";
	  icon.shadow = "http://maps.google.com/mapfiles/kml/shapes/flag_maps_shadow.png";
	  icon.iconSize = new GSize(40, 40);
      icon.shadowSize = new GSize(44, 40);
      icon.iconAnchor = new GPoint(6, 20);
      icon.infoWindowAnchor = new GPoint(5, 1);

      var marker = new GMarker(city.point, icon);
      map.addOverlay(marker);
	  
      GEvent.addListener(marker, "click", function() {
        // 点击Marker时打开信息窗口，添加到Marker中， 设置窗口的宽度，默认页
        marker.openInfoWindowTabsHtml(tabs, {selectedTab : 1});
      });
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 900px; height: 700px"></div>
	<p>当前地图的缩放层次为: <span id="map_zoom"></span></p>
  </body>
</html>